﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js "></script>
    <script src="jquery-1.9.1.min.js"></script>

    <style>
        .list-item__title {
            font-size: 1.2em;
            margin: 0.5em;
            margin-left: 0px;
        }
    </style>
</head>

<body>
    <ons-page>
        <ons-toolbar>

            <div class="center">
                <ons-icon size="30px" icon="ion-cloud"></ons-icon> BYR论坛</div>
        </ons-toolbar>

        <ons-list-header size="">
            <span style="font-size:16px;">论坛十大</span>
        </ons-list-header>
    </ons-page>

    <script>       
        $.getJSON("test.json",function(data){ 
                var a = data;
                console.log(a);
                var i = 0;
                while (i < 10) {
                    $(".page__content").append("<ons-list-item><div class=\"left\"><img class=\"list-item__thumbnail\" src=\"http://placekitten.com/g/40/40\"></div><div class=\"center\"><span class=\"list-item__title\">" + a.data[i].title + "</span><span class=\"list-item__subtitle\">" + a.data[i].content + "</span></div></ons-list-item>");
                    $(".list-item:last").attr("id", i);
                    i++;
                }
                $(".list-item").click(function () {

                    var val = $(this).attr("id");
                    window.open(val+".html"); 
                    alert(val);
                })
            })
        
        
        //}


        //$.ajax({
        //    url: "http://111.230.233.111:8000/media/test.json",
        //    type: 'GET',
        //    dataType: "JSONP",
        //    async: true,
        //    jsonp: 'callback',
        //    jsonpCallback: "success_jsonpCallback",
        //    success: function (data) {
        //        var a = data;
        //        console.log(a);


        //        var i = 0;
        //        while (i < 10) {
        //            $(".page__content").append("<ons-list-item><div class=\"left\"><img class=\"list-item__thumbnail\" src=\"http://placekitten.com/g/40/40\"></div><div class=\"center\"><span class=\"list-item__title\">" + a.data[i].title + "</span><span class=\"list-item__subtitle\">" + a.data[i].content + "</span></div></ons-list-item>");
        //            $(".list-item:last").attr("id", i);
        //            i++;
        //        }
        //        $(".list-item").click(function () {

        //            var val = $(this).attr("id");
        //            alert(val)
        //        })
        //    }
        //})

    </script>

</body>

</html>